<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>狗狗什么的最可爱了</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/vendor/owl.carousel.2.1.0/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="js/vendor/owl.carousel.2.1.0/assets/owl.theme.default.min.css">

</head>
<body>
<!--[if lte IE 8]>
<p class="browserupgrade">您的浏览器版本太老了, 请到 <a href="http://browsehappy.com/">这里</a> 更新, 以获取最佳的体验</p>
<![endif]-->

<header>
    <nav class="main">
        <a href="index.html" class="brand"><img src="img/logo-gougou.png" alt="回到首页"></a>
        <ul>
            <li><a href="HTML.html">HTML</a></li>
            <li><a href="CSS.html">CSS</a></li>
            <li><a href="JS.html">JS</a></li>
            <li><a href="Node.html">Node</a></li>
            <li><a href="fun.html">有趣</a></li>
            <li><a href="Me.html">Me</a></li>
        </ul>
    </nav>
</header>

<div class="container">
    <div class="ad">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <picture>
                    <source srcset="img/1600-450-1.png" media="(min-width:50em)">
                    <source srcset="img/800-300-1.png" media="(min-width:30em)">
                    <img src="img/480-250-1.png" alt="风">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/1600-450-2.png" media="(min-width:50em)">
                    <source srcset="img/800-300-2.png" media="(min-width:30em)">
                    <img src="img/480-250-2.png" alt="景">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/1600-450-3.png" media="(min-width:50em)">
                    <source srcset="img/800-300-3.png" media="(min-width:30em)">
                    <img src="img/480-250-3.png" alt="还">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/1600-450-4.png" media="(min-width:50em)">
                    <source srcset="img/800-300-4.png" media="(min-width:30em)">
                    <img src="img/480-250-4.png" alt="不">
                </picture>
            </div>
        </div>
    </div>
    <section class="sec">
        <div class="mainLeft">
<!--            <a class="bowen">
                <div class="bowenImg">
                    <img src="img/480-250-1.png"/>
                </div>
                <span class="title ">这是一行字是标题</span>
                <p class="shortword">这是一段简介</p>
                <div class="tools">
                    <span class="see"><i></i></span>
                    <span class="like"><i></i></span>
                    <span class="time"><i></i></span>
                </div>
            </a>-->
<!--            <a class="bowen">
                <div class="bowenImg">
                    <img src="img/480-250-1.png"/>
                </div>
                <span class="title ">这是一行字是标题</span>
                <p class="shortword">这是一段简介</p>
                <div class="tools">
                    <span class="see icon-users"><i>100</i></span>
                    <span class="like icon-happy2"><i>100</i></span>
                    <span class="time icon-table"><i>2016.11.19</i></span>
                </div>
            </a>-->
        </div>
        <div class="mainRight">
            <div class="rightBox" id="userInfo">
                <div class="title"><span>用户信息</span></div>
                <p><span class="colDark"></span></p>

                <p><span class="colDanger">你好，欢迎光临我的博客！</span></p>

            </div>
            <div class="rightBox" id="loginBox" style="display: block;">
                <div class="title"><span>登录</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text"><em></em></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password"><em></em></div>
                <div class="line"><span class="colDark"></span><button>登 录</button></div>
                <p class="textRight">还没注册？<a href="javascript:;" class="colMint">马上注册</a>　</p>
                <p class="colWarning textCenter"></p>
            </div>

            <div class="rightBox" id="registerBox" style="display: none;">
                <div class="title"><span>注册</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text"></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password"></div>
                <div class="line"><span class="colDark">确认：</span><input name="repassword" type="password"></div>
                <div class="line"><span class="colDark"></span><button>注 册</button></div>
                <p class="textRight">已有账号？<a href="javascript:;" class="colMint">马上登录</a>　</p>
                <p class="colWarning textCenter"></p>
            </div>
        </div>
    </section>
</div>

<footer>
    <ul class="share-group">
        <li><a class="icon icon-windows"></a></li>
        <li><a class="icon icon-windows8"></a></li>
        <li><a class="icon icon-appleinc"></a></li>
        <li><a class="icon icon-whatsapp"></a></li>
        <li><a class="icon icon-embed2"></a></li>
        <li><a class="icon icon-github"></a></li>
        <li><a class="icon icon-telegram"></a></li>
    </ul>
    <p>版权所有 ® 2017-201314</p>
</footer>

<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/owl.carousel.2.1.0/owl.carousel.min.js"></script>
<script>
    $(function () {
        var $userInfo = $('#userInfo');
        var $loginBox = $('#loginBox');
       if (sessionStorage.getItem ('username') != null)
       {
           var username = sessionStorage.getItem('username');
           //$('.colWarning').html(username);
           $userInfo.show();
           $loginBox.hide();
           $userInfo.find('.title > span').html(username);
       }
       else
       {
           $userInfo.hide();
       }
    });
</script>
<script src="js/main.js"></script>
</body>
</html>